---
title: Σχόλια
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Δείχνει την πρόοδο ή την αντίστροφη μέτρηση και κινείται από τα δεξιά προς τα αριστερά.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες         | Τύπος         | Περιγραφή                                                                               | Προεπιλογή |
| ----------------- | ------------- | --------------------------------------------------------------------------------------- | ---------- |
| διάρκεια          | αριθμός       | Η συνολική διάρκεια της κίνησης της γραμμής προόδου σε χιλιοστά του δευτερολέπτου       | 3          |
| καθυστέρηση       | αριθμός       | Η καθυστέρηση στην έναρξη της κίνησης της γραμμής προόδου σε χιλιοστά του δευτερολέπτου | 0          |
| εξομάλυνση        | αλφαριθμητικό | Συνάρτηση εξομάλυνσης για την κίνηση της γραμμής προόδου                                | easeInOut  |
| ύψος γραμμής      | αριθμός       | Το ύψος της γραμμής σε pixel                                                            | 24         |
| χρώμα γραμμής     | αλφαριθμητικό | Το χρώμα της γραμμής                                                                    | gray80     |
| αυτόματη εκκίνηση | boolean       | Αν `true`, η κίνηση της γραμμής προόδου ξεκινά αυτόματα όταν το συστατικό φορτώνεται    | `αληθής`   |

</Tab>
</Tabs>

## Κυκλική Γραμμή Προόδου

Δείχνει την πρόοδο της εκτέλεσης μιας εργασίας, που χρησιμοποιείται συχνά σε οθόνες φόρτωσης ή περιοχές όπου θέλετε να επικοινωνήσετε συνεχιζόμενες διαδικασίες στον χρήστη.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες      | Τύπος         | Περιγραφή                               | Προεπιλογή   |
| -------------- | ------------- | --------------------------------------- | ------------ |
| μέγεθος        | αριθμός       | Το μέγεθος της κυκλικής γραμμής προόδου | 50           |
| πλάτος γραμμής | αριθμός       | Το πλάτος της γραμμής προόδου           | 5            |
| χρώμα γραμμής  | αλφαριθμητικό | Το χρώμα της γραμμής προόδου            | currentColor |

</Tab>

</Tabs>
